@import './animation';
@import './dark';
@import './light';
@import './theme';
@import '../layout/layout';

@border-radius-base: 8px; // 边框
@border-color-grey: rgb(239, 239, 245); //灰色边框
@border-color-grey-dark: #aaa; //深灰色边框
@background-color-gray: rgb(246, 248, 249); // 灰色背景
@background-color-white: rgb(255, 255, 255); // 白色背景

.blur-bg {
  background-color: rgba(240, 240, 240, 0.7);
  box-shadow: 0 0 20px 5px rgb(40 40 40 / 30%);
  backdrop-filter: blur(20px);
}
html,
body {
  height: 100%;
  width: 100%;
}
// 全局置灰功能
html.gray {
  @grayscale: 0.75;
  -webkit-filter: grayscale(@grayscale);
  -moz-filter: grayscale(@grayscale);
  -ms-filter: grayscale(@grayscale);
  -o-filter: grayscale(@grayscale);
  filter: grayscale(@grayscale);
  -webkit-filter: gray;
  filter: gray;
  -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=@grayscale);
  filter: progid:dximagetransform.microsoft.basicimage(grayscale=@grayscale);
}
#app {
  height: 100%;
  width: 100%;
}
// 圆圈loading样式
.spin-loading-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.spin-loading-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  .n-spin-description,
  .n-base-loading__svg {
    color: var(--primary-color);
  }
}

[data-theme='dark'] .spin-loading-container {
  background: rgb(50 49 49 / 85%);

  .spin-loading-body {
    .n-spin-description,
    .n-base-loading__svg {
      color: var(--primary-colorHsl);
    }
  }
}

// 条状loading样式
.loading-box {
  z-index: 2000;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  overflow: hidden;
  position: absolute;
  z-index: 1000;
  font-size: 16px;
  height: 40px;
  display: flex;
  align-items: center;
  .loader-item {
    width: 150px;
    height: 20px;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      background-color: var(--primary-colorHsl);
      top: 0;
      left: 0;
      height: 24px;
      width: 0;
      z-index: 0;
      opacity: 1;
      border-radius: 10px;
      -webkit-transform-origin: 100% 0;
      transform-origin: 100% 0;
      -webkit-animation: loader 3s ease-in-out infinite;
      animation: loader 3s ease-in-out infinite;
    }
    &::after {
      content: attr(data-content);
      color: #fff;
      text-indent: 10px;
      border: 1px solid var(--primary-color);
      box-sizing: border-box;
      font-weight: 200;
      font-size: 12px;
      border-radius: 10px;
      position: absolute;
      width: 100%;
      height: 24px;
      line-height: 24px;
      left: 0;
      top: 0;
    }
  }
}

[data-theme='dark'] .loading-box {
  background: rgb(50 49 49 / 85%);

  .loader-item {
    &::before {
      background-color: var(--primary-colorHsl);
    }
    &::after {
      border-color: var(--primary-colorHsl);
    }
  }
}

/*全局滚动条样式*/
::-webkit-scrollbar {
  width: 7px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 2px;
  height: 3px;
  height: 6px !important;
  // border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-track {
  // margin: 3px 0;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

// dialog相关
// dialog title文本禁止选中
.n-dialog {
  display: flex;
  flex-direction: column;
}
.n-dialog__title {
  user-select: none;
  flex: 0 0 auto;
  width: 100%;
}
.n-dialog__content {
  overflow: auto;
  flex: 1 1 auto;
}
.n-dialog__action {
  flex: 0 0 auto;
}
// dialog全局 全屏样式
.header-full-screen-icon {
  position: absolute;
  right: 54px;
  height: 22px;
  width: 22px;
  border-radius: 6px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-full-screen-icon:hover {
  background-color: #e8e8e8;
}
.dialog-icon-is-dark:hover {
  background-color: #46464b !important;
}
// 全屏
.is-full-screen {
  width: 100% !important;
  align-self: auto !important;
  box-sizing: content-box !important;
  margin: 0 !important;
  max-height: 100vh !important;
}
// 全屏切换动画
.full-screen-animation {
  transition: width 0.3s ease-in;
}

.card-title-prefix {
  .n-card-header__main {
    padding-left: 8px;
    font-weight: 700;

    &:before {
      content: '';
      position: absolute;
      width: 6px;
      height: 20px;
      left: 10px;
      top: 14px;
      background-color: var(--primary-color);
    }
  }
}


.prefix-title {
  position: relative;
  font-weight: 700;
  font-size: 16px;
  padding-left: 10px;
  line-height: 26px;

  &::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 20px;
    left: -5px;
    top: 3px;
    background-color: var(--primary-color);
  }
}

.flex-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-ac {
  display: flex;
  align-items: center;
}

.flex-jc {
  display: flex;
  justify-content: center;
}

.success-color {
  color: #4ba96b;
}

.primary-color {
  color: #38aec1;
}

.warning-color {
  color: #eba134;
}

.error-color {
  color: #c93252;
}

.info-color {
  color: #3080ed;
}

// 底部的按钮组
.bottom-button-group {
  display: flex;
  justify-content: center;

  &__left {
    justify-content: start;
  }
  &__right {
    justify-content: end;
  }
  &__center {
    justify-content: center;
  }

  > button {
    position: relative;
    margin-right: 70px;
    // &::after {
    //   position: absolute;
    //   right: -35px;
    //   width: 2px;
    //   height: 100%;
    //   background: rgba(187, 187, 187, 0.431);
    //   content: '';
    //   cursor: auto;
    // }

    &:last-child {
      margin-right: 0;
      // &::after {
      //   display: none;
      // }
    }
  }
}

// 确定/提交的按钮长度
.button__submit {
  width: 150px;
}

